<!-- 活动核销 -->
<template>
  <view class="container">
    <view class="data-box">
      <!-- 标题 -->
      <view class="title u-line-2"> {{ eventsContacts.eventsName }} </view>
      <!-- 联系人信息 -->
      <view class="box-content" style="padding-right: 10rpx">
        <view class="box-title" style="margin-right: 10rpx">
          <img class="icons" src="https://img.qumoyugo.com/webimgbg/picopino_icon_pay_baom_info.png">
          报名信息
        </view>
        <view class="regist-info">
          <view class="item u-center" v-for="sku in registSkuList" :key="sku.id" :class="sku.id === currnetSku.id ? 'active' : sku.stock ? '' : 'no-stock'" @click="chooseSku(sku)">
            <view>
              {{sku.personPetNum}}{{ sku.otherType ? ' + ' + sku.otherType : sku.otherType}}
            </view>
            <view style="font-weight: normal;color: #F53F3F;margin-top:8rpx" v-if="!sku.stock">已满</view>
          </view>
        </view>
        <view class="contact-info">
          <view class="text-title">手机号</view>
          <view style="display:flex;align-items: center;">
            <text style="color:#F39A41;margin-right:12rpx">必填</text>
            <input type="number" v-model="eventsContacts.phone" style="color:#414141;font-size:14px;width:150px" placeholder="请务必填写真实手机号" />
          </view>
        </view>
        <view class="contact-info" style="align-items: flex-start;">
          <view class="text-title">备&nbsp;&nbsp;&nbsp;注</view>
          <view style="display:flex;align-items: center;width:100%">
            <uni-easyinput type="textarea" placeholderStyle="font-size: 14px" v-model="eventsContacts.orderRemark" placeholder="请输入备注" maxlength="30"/>
          </view>
        </view>
      </view>
      <!-- 参与人员 -->
      <view class="box-content" v-if="personConfig.nameEnable">
        <view class="box-data" v-if="personList.length">
          <view class="data-warp" v-for="(item, index) in personList" :key="index">
            <image
              class="remind-num"
              @click="delSelectDta(index, 'person')"
              src="https://img.qumoyugo.com/webimgbg/delete_small_icon_n_g.png"
            ></image>
            <view class="text-warp">{{ item.name }} </view>
          </view>
        </view>
        <view class="add-select-item" @click="navigateWidthId('person')">
          <image style="width: 70rpx;height: 70rpx;" src="https://img.qumoyugo.com/webimgbg/picopino_icon_add_select_item.png"/>
          <text>选择参与人</text>
        </view>
      </view>
      <!-- 参与宠物 -->
      <view class="box-content" v-if="petConfig.nameEnable">
        <view class="box-data" v-if="petList.length">
          <view class="data-warp" v-for="(item, index) in petList" :key="index">
            <image
              class="remind-num"
              @click="delSelectDta(index, 'pet')"
              src="https://img.qumoyugo.com/webimgbg/delete_small_icon_n_g.png"
            ></image>
            <view class="text-warp">
              {{ item.name }}
            </view>
          </view>
        </view>
        <view class="add-select-item" @click="navigateWidthId('pet')">
          <image style="width: 70rpx;height: 70rpx;" src="https://img.qumoyugo.com/webimgbg/picopino_icon_add_select_item.png"/>
          <text>选择参与宠物</text>
        </view>
      </view>
      <!-- 优惠券信息 -->
      <view class="coupon-content">
        <view class="box-content">
          <view class="box-title">
            <img class="icons" src="https://img.qumoyugo.com/webimgbg/picopino_icon_pay_youhui_info.png">
            优惠情况
          </view>
          <view class="coupon-info" @click="toggle(0)">
            <view>优惠券</view>
            <view class="text-data" :class="!!couponInfo.couponName ? 'select' : ''">
              {{ !!couponInfo.couponName ? couponInfo.couponName : '请选择优惠券' }}
              <uni-icons type="right" size="16" color="#999"></uni-icons>
            </view>
          </view>
          <view class="coupon-info border-bt" @click="toggle(1)">
            <view>小饼干抵扣</view>
            <view class="text-data" :class="currnetBiscuit.name ? 'select' : ''">
              {{ currnetBiscuit.name || '请选择抵扣方式' }}
              <uni-icons type="right" size="16" color="#999"></uni-icons>
            </view>
          </view>
        </view>
      </view>
      <BottomPay v-if="currnetSku.id" :option="eventsContacts" btnText="确认支付" @operate="validateData()"></BottomPay>
    </view>
    <!-- 优惠券弹窗 -->
    <uni-popup ref="couponPopup" background-color="#fff" type="bottom">
      <view class="coupon-prpup-content">
        <view @click="closePopupChange(0)" class="close_btn">
          <image
            style="width: 21px; height: 21px"
            src="https://img.qumoyugo.com/img/NRCYGW3HPE1124LEIRJC11698991117133.svg"></image>
        </view>
        <view class="no-data" v-if="listData.length === 0">
          <EmptyBox title="暂无优惠券～" img="https://img.qumoyugo.com/webimgbg/pets-no-data-product.png"> </EmptyBox>
        </view>
        <scroll-view class="list-data" scroll-y v-else>
          <view v-for="(item, index) in listData" :key="item.id" class="line-box" @click.stop="clickCouopn(item)">
            <ChooseCoupon :data="item" :applyPrice="eventsContacts.applyPrice" :index="index"></ChooseCoupon>
          </view>
        </scroll-view>
      </view>
    </uni-popup>
    <uni-popup ref="biscuitPopup" background-color="#fff" type="bottom">
      <view class="choose-biscuit">
        <view class="name-t">
          <img src="https://img.qumoyugo.com/img/J8TDB1UCN7CQBI8QB9RQ1698990954264.png" style="width: 38rpx;height: 30rpx;margin-right:16rpx">
          <view style="flex:1">
            我的小饼干数：{{eventsContacts.amount}} 个
          </view>
          <image src="https://img.qumoyugo.com/img/NRCYGW3HPE1124LEIRJC11698991117133.svg" style="width: 42rpx;height: 42rpx;" @click="closePopupChange(1)"></image>
        </view>
        <scroll-view scroll-y style="height: 460rpx">
          <view class="picker-view" @click="chooseBiscuit()">不抵扣</view>
          <view :class="deduction.biscuitAmount > eventsContacts.amount ? 'picker-view invalid' : 'picker-view'" v-for="deduction in deductionConfigList" :key="deduction" @click="chooseBiscuit(deduction)">
            {{deduction.biscuitAmount}} 个小饼干
            <text class="color">抵扣¥{{deduction.deductionAmount/100}}</text>
          </view>
        </scroll-view>
      </view>
    </uni-popup>
    <uni-popup ref="peoplePopup" background-color="#fff" type="bottom">
      <view class="choose-biscuit">
        <view class="name-t">
          <image src="https://img.qumoyugo.com/img/NRCYGW3HPE1124LEIRJC11698991117133.svg" style="width: 42rpx;height: 42rpx;" @click="closePopupChange(2)"></image>
          <view style="font-weight: normal;">{{ currentSelect === 'pet' ? '常用参与宠物' : '常用参与人'}}</view>
          <view style="color:#F0831E" @click="closePopupChange(2, 'select')">确定</view>
        </view>
        <scroll-view scroll-y class="canyu-select" v-if="currentSelect === 'person'">
          <view class="canyu-item" v-for="person in eventsOrderPerson" :key="person.id">
            <image :src="person.noData ? 'https://img.qumoyugo.com/webimgbg/picopino_icon_forbid_select_person.png' : getSelectImage(person, 'person')" style="width: 70rpx;height: 70rpx;" @click="selectPeron(person, 'person')"></image>
            <view style="flex:1" @click="selectPeron(person, 'person')">
              {{person.name}}
              <text style="color: #F53F3F;margin-left: 20rpx">{{ person.noData ? '缺少必要信息' : '' }}</text>
            </view>
            <view style="color: #999;padding: 20rpx" @click="gotoPage('/user/addPerson?eventsId=' + eventsOrder.id + '&pId=' + person.id)">修改</view>
          </view>
        </scroll-view>
        <view class="add-select-item" @click="gotoPage('/user/addPerson?eventsId=' + eventsOrder.id)" v-if="currentSelect === 'person'">
          <image style="width: 70rpx;height: 70rpx;" src="https://img.qumoyugo.com/webimgbg/picopino_icon_add_select_item.png"/>
          <text>新增参与人</text>
        </view>
        <scroll-view scroll-y class="canyu-select" v-if="currentSelect === 'pet'">
          <view class="canyu-item" v-for="pet in petManageList" :key="pet.id">
            <image :src="pet.noData ? 'https://img.qumoyugo.com/webimgbg/picopino_icon_forbid_select_person.png' : getSelectImage(pet, 'pet')" style="width: 70rpx;height: 70rpx;" @click="selectPeron(pet, 'pet')"></image>
            <view style="flex:1" @click="selectPeron(pet, 'pet')">
              {{pet.name}}
              <text v-if="pet.isMyPet" class="hot">我的爱宠</text>
              <text style="color: #F53F3F;margin-ledt: 20rpx">{{ pet.noData ? '缺少必要信息' : '' }}</text>
            </view>
            <view style="color: #999;padding: 20rpx" @click="gotoPage('/user/addManagePet?eventsId=' + eventsOrder.id + '&pId=' + pet.id)" v-if="!pet.isMyPet">修改</view>
          </view>
        </scroll-view>
        <view class="add-select-item" @click="gotoPage('/user/addManagePet?eventsId=' + eventsOrder.id)" v-if="currentSelect === 'pet'">
          <image style="width: 70rpx;height: 70rpx;" src="https://img.qumoyugo.com/webimgbg/picopino_icon_add_select_item.png"/>
          <text>新增参与宠物</text>
        </view>
      </view>
    </uni-popup>
    <TipPopup ref="tipPopup" :option="{
      subTitle: '确认报名该活动吗？',
      img: 'https://img.qumoyugo.com/img/MASBUOYAFA2TETSL7XU7G1698919148763.png',
      click: true
    }">
      <view class="order-btn u-center" style="width:280rpx" @click="createOrder()">确认</view>
    </TipPopup>
  </view>
</template>

<script setup>
import ChooseCoupon from '@/components/list/choose-coupop'
import EmptyBox from '@/components/emptyBox'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { ref, getCurrentInstance } from 'vue'
import BottomPay from '@/components/bottomBar/pay'
import TipPopup from '@/components/popup/tipPopup'
const { $https } = getCurrentInstance().appContext.config.globalProperties
const couponInfo = ref({})
const personList = ref([])
const _selectPerson = ref([])
const _selectPet = ref([])
const petList = ref([])
const eventsOrder = ref({})
const couponPopup = ref(null)
const biscuitPopup = ref(null)
const peoplePopup = ref(null)
const tipPopup = ref(null)
const listData = ref([])
const deductionConfigList = ref([])
const registSkuList = ref([])
const eventsContacts = ref({})
const currnetSku = ref({})
const currnetBiscuit = ref({})
const payWait = ref(false)
const eventsOrderPerson = ref([])
const petManageList = ref([])
const personConfig = ref({})
const petConfig = ref({})
const isFirst = ref(false)
const currentSelect = ref('')
onLoad(option => {
  eventsOrder.value = option
  getInt()
})
onShow(() => {
  payWait.value = false
  if (!isFirst.value) {
    isFirst.value = true
  } else {
    getListByEventOrderId()
    getListByPetManage()
  }
})
// 选择sku计算价格
const chooseSku = (item, type) => {
  // type 为1,2是优惠券和小饼干更改
  if (!item.stock) {
    uni.showToast({
      title: '已满',
      icon: 'none'
    })
    return false
  }
  if (!type) {
    if (currnetSku.value.id === item.id) return
    currnetSku.value = item
  }
  $https({
    url: '/app/eventsOrder/calculatePrice',
    type: '',
    method: 'post',
    data: {
      eventsId: eventsOrder.value.id,
      feeConfigId: currnetSku.value.id,
      couponId: couponInfo.value.id || 0,
      biscuitAmount: currnetBiscuit.value.biscuitAmount || 0
    }
  }).then(res => {
    if (res.code === 0) {
      eventsContacts.value.applyPrice = res.data.payAmount / 100
      eventsContacts.value.deductionAmount = res.data.deductionAmount / 100
    }
  })
}
// 确认支付
const createOrder = () => {
  if (payWait.value) {
    return
  }
  payWait.value = true
  uni.showLoading({ title: '订单生成中' })
  couponInfo.value.couponMoney = couponInfo.value.couponMoney ? couponInfo.value.couponMoney : 0
  const submitData = {
    applyName: eventsContacts.value.nickname,
    applyPhone: eventsContacts.value.phone,
    eventsId: eventsOrder.value.id,
    feeConfigId: currnetSku.value.id,
    couponId: couponInfo.value.id || 0,
    orderRemark: eventsContacts.value.orderRemark,
    orderPersonList: personList.value,
    orderPetList: petList.value,
    biscuitAmount: currnetBiscuit.value.biscuitAmount || 0
  }
  $https({
    url: '/app/eventsOrder',
    type: '',
    method: 'POST',
    data: submitData
  }).then(res => {
    if (res.code === 0) {
      const data = {
        tableId: res.data.id
      }
      if (res.data.orderStatus === '0') {
        payJump(data)
      } else {
        uni.hideLoading()
        uni.redirectTo({
          url: `/events/eventsResult?id=${res.data.id}`
        })
      }
    } else {
      payWait.value = false
      uni.hideLoading()
      uni.showToast({ title: res.msg, duration: 2000, icon: 'none' })
    }
  }).catch(e => {
    payWait.value = false
    uni.hideLoading()
  })
}
const validateData = () => {
  if (personConfig.value.nameEnable && !personList.value.length) {
    uni.showToast({
      title: '请选择参与人',
      icon: 'none'
    })
    return false
  }
  if (petConfig.value.nameEnable && !petList.value.length) {
    uni.showToast({
      title: '请选择参与宠物',
      icon: 'none'
    })
    return false
  }
  tipPopup.value.show()
}
// 获取活动数据
const getInt = () => {
  $https({
    url: '/app/eventsInfo/enroll/' + eventsOrder.value.id,
    type: '',
    method: 'get'
  }).then(res => {
    if (res.code === 0) {
      eventsContacts.value = {
        ...res.data.customerInfo,
        feeConfigType: res.data.feeConfigType,
        eventsName: res.data.eventsName
      }
      deductionConfigList.value = res.data.deductionConfigList
      registSkuList.value = res.data.feeConfigList || []
      personConfig.value = res.data.personConfig
      petConfig.value = res.data.petConfig
      // 计算第一个选冲sku信息
      const findSku = registSkuList.value.find((item) => item.stock !== 0)
      if (findSku) {
        chooseSku(findSku)
      } else {
        uni.showToast({
          title: '暂无库存',
          icon: 'none'
        })
      }
      getListByEventOrderId()
      getListByPetManage()
    }
  })
}
const payJump = async order => {
  $https({
    url: '/app/order/pay',
    type: '',
    method: 'POST',
    data: {
      orderId: order.tableId,
      orderType: '0'
    }
  })
    .then(res2 => {
      payWait.value = false
      if (res2.code === 0) {
        uni.requestPayment({
          ...res2.data.signParam,
          success: res => {
            uni.redirectTo({
              url: `/events/eventsResult?id=${order.tableId}`
            })
            uni.hideLoading()
          },
          fail: () => {
            uni.showToast({ title: '支付失败', icon: 'error' })
            uni.redirectTo({
              url: '/user/order/index?orderStatus=1'
            })
            uni.hideLoading()
          }
        })
      } else {
        uni.hideLoading()
      }
    })
    .catch(e => {
      uni.hideLoading()
    })
}
const initPopupData = () => {
  $https({
    url: '/app/couponInfo/getOrderCouponList',
    type: '',
    data: {
      couponType: '0',
      couponPrice: Math.round(eventsContacts.value.applyPrice * 100),
      page: 1,
      pageSize: 9999
    }
  }).then(res => {
    if (res.code === 0) {
      listData.value = res.data.items
    }
  })
}
const toggle = (type) => {
  if (type) {
    biscuitPopup.value.open()
  } else {
    couponPopup.value.open()
    initPopupData()
  }
}
const closePopupChange = (type, select) => {
  switch (type) {
    case 0:
      couponPopup.value.close()
      break
    case 1:
      biscuitPopup.value.close()
      break
    case 2:
      if (select) {
        if (currentSelect.value === 'person') {
          personList.value = _selectPerson.value
          console.log(personList.value, _selectPerson.value)
        } else {
          petList.value = _selectPet.value
        }
      }
      peoplePopup.value.close()
      break
  }
}
const clickCouopn = (item) => {
  if (item) {
    const price = item.orderMinMoney ? item.orderMinMoney / 100 : item.coupon.orderMinMoney
    if (eventsContacts.value.applyPrice < price) {
      uni.showToast({ title: '订单金额低于优惠券最低使用金额 ' + price, icon: 'none' })
      return
    }
    couponInfo.value = item
    couponPopup.value.close()
    // 计算
    chooseSku(currnetSku.value, 2)
  }
}
const chooseBiscuit = (item = {}) => {
  if (item.biscuitAmount > eventsContacts.value.amount) return false
  currnetBiscuit.value = {
    ...item,
    name: item.biscuitAmount ? `${item.biscuitAmount}个小饼干 抵扣¥${item.deductionAmount / 100}` : '不抵扣'
  }
  chooseSku(currnetSku.value, 1)
  biscuitPopup.value.close()
}
const navigateWidthId = (type) => {
  peoplePopup.value.open()
  currentSelect.value = type
}
const gotoPage = (url) => {
  uni.navigateTo({ url })
}
const getListByEventOrderId = () => {
  $https({
    url: '/app/personnelManage/page/list',
    type: ''
  }).then(res => {
    if (res.code === 0) {
      const _arr = []
      res.data.items.forEach(item => {
        const _item = {
          ...item
        }
        if (personConfig.value.phoneEnable && !item.phone) {
          _item.noData = true
        }
        if (personConfig.value.birthdayEnable && !item.birthday) {
          _item.noData = true
        }
        _arr.push(_item)
      })
      eventsOrderPerson.value = _arr
    }
  })
}
const getListByPetManage = () => {
  $https({
    url: '/app/petManage/list',
    type: ''
  }).then(res => {
    if (res.code === 0) {
      const _arr = []
      res.data.forEach(item => {
        const _item = {
          ...item
        }
        if (petConfig.value.breedEnable && !item.breed) {
          _item.noData = true
        }
        if (petConfig.value.birthdayEnable && !item.birthday) {
          _item.noData = true
        }
        _arr.push(_item)
      })
      petManageList.value = _arr
    }
  })
}
const delSelectDta = (idx, type) => {
  if (type === 'person') {
    personList.value.splice(idx, 1)
  } else {
    petList.value.splice(idx, 1)
  }
}
const selectPeron = (person, type) => {
  if (person.noData) return false
  if (type === 'person') {
    const _pindex = _selectPerson.value.findIndex(item => item.id === person.id)
    if (_pindex === -1) {
      _selectPerson.value.push(person)
    } else {
      _selectPerson.value.splice(_pindex, 1)
    }
  } else {
    const _tindex = _selectPet.value.findIndex(item => item.id === person.id)
    if (_tindex === -1) {
      _selectPet.value.push(person)
    } else {
      _selectPet.value.splice(_tindex, 1)
    }
  }
}
const getSelectImage = (person, type) => {
  let _index
  if (type === 'person') {
    _index = _selectPerson.value.findIndex(item => item.id === person.id)
  } else {
    _index = _selectPet.value.findIndex(item => item.id === person.id)
  }
  if (_index === -1) {
    return 'https://img.qumoyugo.com/webimgbg/picopino_icon_no_select_person.png'
  } else {
    return 'https://img.qumoyugo.com/webimgbg/picopino_icon_sure_select_person.png'
  }
}
// onBeforeUnmount(() => {
//   uni.$off('getPersonInfo')
// })
</script>

<style scoped lang="scss">
@import "@/assets/styles/minx.scss";
.data-box {
  background: #FFF8F0;
  padding-bottom: calc(72px + env(safe-area-inset-bottom));
  min-height: 100vh;
  padding-top: 1rpx;
}
.title {
  margin: 30rpx 35rpx;
  font-size: 32rpx;
  font-weight: bold;
  color: #414141;
  line-height: 40rpx;
}
.box-content {
  padding: 1rpx 30rpx;
  margin: 0 22rpx 30rpx 22rpx;
  background: #ffffff;
  border-radius: 18rpx;
}
.box-title {
  padding: 30rpx 0;
  font-size: 32rpx;
  font-weight: bold;
  color: #000;
  display: flex;
  align-items: center;
  position: relative;
  line-height: 32rpx;
  &::before{
    @include border(bottom, #EBEBEB)
  }
  .tips{
    font-size: 22rpx;
    color: #ED8241;
    margin-left: 8rpx;
    font-weight: normal;
    line-height: 24rpx;
    align-self: flex-end;
  }
  .icons{
    width: 40rpx;
    height: 40rpx;
    margin-right: 10rpx;
  }
}
.box-data {
  display: flex;
  flex-wrap: wrap;
  .add-image {
    height: 52rpx;
    width: 52rpx;
    padding: 22rpx 36rpx;
  }
}
.box-notice {
  margin: 28rpx;
  height: 24rpx;
  font-size: 25rpx;
  font-weight: 400;
  color: #ee751e;
  line-height: 24rpx;
  display: flex;
  .notice-image {
    margin-right: 12rpx;
    width: 28rpx;
    height: 28rpx;
  }
}
.data-warp {
  display: flex;
  align-items: center;
  color: #414141;
  line-height: 28rpx;
  font-weight: bold;
  font-size: 28rpx;
  padding: 16rpx 0;
  position: relative;
  width: 50%;

  &::before{
    @include border(bottom, #E1E1E1)
  }
  .remind-num {
    width: 70rpx;
    height: 70rpx;
  }
}
.contact-info {
  display: flex;
  justify-content: flex-start;
  color: #666;
  align-items: center;
  padding: 28rpx 0;
  margin-right: 20rpx;
  position: relative;
  min-height: 1.4rem;
  line-height: 1.4rem;
  font-size: 14px;
  &::before{
    @include border(top, #E1E1E1)
  }
}
.regist-info{
  padding-top: 20rpx;
  padding-bottom: 10rpx;
  display: flex;
  flex-wrap: wrap;
  .item{
    padding: 0 20rpx;
    margin: 0 20rpx 20rpx 0;
    background-color: #F2F2F2;
    border: 1px solid #F2F2F2;
    color: #414141;
    border-radius: 10rpx;
    font-size: 24rpx;
    line-height: 24rpx;
    position: relative;
    width: calc(50% - 20rpx);
    text-align: center;
    font-weight: bold;
    height: 92rpx;
    flex-direction: column;
    &.active{
      background-color: #FFF6EF;
      border: 1px solid #EE751E;
    }
    &.no-stock{
      border: 1px dashed #AFAFAF;
      background-color: #fff;
      color: #AFAFAF;
    }
  }
}
.border-bt{
  position: relative;
  &::before{
    @include border(top, #EBEBEB)
  }
}
.coupon-info {
  display: flex;
  justify-content: flex-start;
  font-size: 26rpx;
  color: #414141;
  padding: 40rpx 0;
  align-items: center;
  justify-content: space-between;
  line-height: 28rpx;
  .text-data {
    display: flex;
    color: #999;
    &.select{
      font-weight: bold;
      color: #414141;
    }
  }
  .image-class {
    width: 24rpx;
    height: 24rpx;
    margin-left: 20rpx;
  }
}
.text-title {
  margin-right: 20rpx;
}
.text-data {
  font-size: 24rpx;
  font-weight: 500;
  color: #414141;
}
.text-title-remark {
  font-size: 25rpx;
  font-weight: 400;
  color: #999999;
  white-space: nowrap;
}
.remark-input {
  width: 653rpx;
  height: 278rpx;
  background: #ffffff;
  border: 1px solid #999999;
  border-radius: 8rpx;
  margin-left: 28rpx;
  margin-right: 28rpx;
  padding-bottom: 50rpx;
}
.remark-input-placeholder {
  color: #f76260;
}
.remark-input-data {
  margin-top: 19rpx;
  margin-left: 22rpx;
  font-size: 22rpx;
  font-weight: 400;
}
.agreement_div {
  padding-bottom: 60rpx;
  height: auto;
  margin: 28rpx;
  font-size: 22rpx;
  font-weight: 400;
  color: #999999;
  line-height: 32rpx;
  display: flex;
  .isLink {
    color: #000000;
    font-weight: 500;
    color: #ee751e;
  }
  .agreement_img {
    margin-right: 10rpx;
    height: 32rpx;
    width: 32rpx;
  }
  .nocheck-image {
    height: 32rpx;
    width: 32rpx;
  }
  .check-image {
    height: 32rpx;
    width: 32rpx;
  }
  .agreement_txt {
    display: block;
    height: auto;
    font-size: 22rpx;
    line-height: 32rpx;
  }
}
.close_btn {
  position: absolute;
  right: 24rpx;
  top: 24rpx;
}
.list-data {
  height: 420rpx;
  position: relative;
}
.no-data {
  padding-top: 40rpx;
  text-align: center;
}
.coupon-prpup-content {
  height: 500rpx;
  padding-top: 80rpx;
  .line-box {
    width: 735rpx;
    height: 210rpx;
    background-image: url('https://img.qumoyugo.com/img/P9F9FEAYIYMEEGSHIQN81688720571261.png');
    background-size: 100% 100%;
    &:last-child {
      border-bottom: none;
    }
  }
  .list-box {
    min-height: calc(100vh - 36px);
    background: #f4f4f4;
    padding: 9.03rpx 8.33rpx 0 8.33rpx;
  }
}
.choose-biscuit{
  padding: 0 40rpx;
  height: 60vh;
  font-size: 30rpx;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  .canyu-select{
    flex: 1;
    height: 600rpx;
  }
  .name-t{
    display: flex;
    align-items: center;
    color: #414141;
    padding: 30rpx 0;
    justify-content: space-between;
  }
  .picker-view{
    text-align: center;
    position: relative;
    padding: 40rpx 0;
    &.invalid{
      color: #C8C8C8 !important;
      .color{
        color: #C8C8C8;
      }
    }
    &::before{
      @include border(top, #EBEBEB)
    }
    .color{
      color: #EE751E;
    }
  }
}
.canyu-item{
  display: flex;
  justify-content: space-between;
  font-weight: normal;
  align-items: center;
  position: relative;
  padding: 20rpx 0;
  font-size: 28rpx;
  &::before{
    @include border(top, #E1E1E1)
  }
  .hot{
    padding: 6rpx 10rpx;
    border-radius: 8rpx;
    background: rgba(201, 231, 230, 0.60);
    font-size: 22rpx;
  }
}
.add-select-item{
  display: flex;
  justify-content: center;
  align-items: center;
  color: #F0831E;
  font-weight: bold;
  font-size: 26rpx;
  line-height: 26rpx;
  padding: 16rpx 0;
}
.order-btn{
  margin: 0 auto;
  position: relative;
  width: 250rpx;
  height: 74rpx;
  background: #F7B064;
  font-size: 30rpx;
  color: #000;
  border-radius: 1000px;
  &::before{
    @include border(full, #414141, 1000px)
  }
}
</style>
<style scoped>
:deep(.contact-info .is-input-border){
  border:none
}
:deep(.contact-info .uni-easyinput__content-textarea){
  margin: 2px 6rpx;
  line-height: 32rpx;
  height: 64rpx;
  min-height: 64rpx;
}
:deep(.contact-info .input-padding){
  padding-left: 0;
}
</style>
